<!-- subpkg_medicine/payment/index.vue -->
<script lang="ts" setup>
import { orderPayApi , orderPayApiMock} from '@/apis/consult';
import { addressListApi, createOrderApi, preOrderApi } from '@/apis/order'
import type { Address, OrderPre } from '@/types/order'
import { ref } from 'vue'

// 1. 获取地址信息(当前用户的地址-传递了 token)
const addressInfo = ref({} as Address)
const getAddress = async () => {
  const res = await addressListApi()
  // console.log(res)
  // 地址是一个数组，用第一个即可
  addressInfo.value = res[0]
}
getAddress()

// 2. 根据 id 获取 药品订单的信息
const props = defineProps<{ id: string }>()
// console.log(props)
const preOrderInfo = ref({} as OrderPre)
const getPreOrder = async () => {
  const res = await preOrderApi(props.id)
  // console.log(res)
  preOrderInfo.value = res
}

getPreOrder()

// 3. 待支付订单ID
const orderId = ref('')
// 支付渠道组件实例
const paymentRef = ref()

// 关闭支付渠道弹层
const onPaymentClose = () => {
  paymentRef.value.close()
}

// 支付渠道确认支付
const onPaymentConfirm = async (index: number) => {
  if (index === 0) return uni.showToast({ title: '暂不支持微信支付!' })
  // 调用后端提供的支付接口
  const data = await orderPayApi({
    orderId: orderId.value,
    paymentMethod: index.toString(),
    // 回调地址 改为 药品相关的地址
    payCallback: 'http://localhost:5173/#/subpkg_medicine/pay_result/index',
  })
  // 支付宝支付页面
  window.location.href = data.payUrl
  console.log(index)
}

// 选择支付渠道
const onPaymentButtonClick = async () => {
   // 订单 id 为空时，才需要创建订单
   if (orderId.value == '') {
    // 创建预支付订单之后，再弹出支付选择窗口
    const res = await createOrderApi(props.id, addressInfo.value.id)
    // console.log(res)
    orderId.value = res.id
  }

  paymentRef.value.open()
}
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{ addressInfo.province }}
            {{ addressInfo.city }}
            {{ addressInfo.county }}
          </view>
          <view class="detail">{{ addressInfo.addressDetail }}</view>
          <view class="receiver">{{ addressInfo.receiver }} {{ addressInfo.mobile }}</view>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view v-for="(item, index) in preOrderInfo.medicines" :key="item.id" class="medicine-list-item">
          <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ item.name }}</text>
            <text class="unit symbol">{{ item.specs }}</text>
            <text class="price">¥{{ item.amount }}</text>
          </view>
          <view class="quantity">x{{ item.quantity }}</view>
          <view class="guide">用法用量：{{ item.usageDosag }}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${preOrderInfo.payment}.00`" />
          <uni-list-item title="运费" :right-text="`¥${preOrderInfo.expressFee}.00`" />
          <uni-list-item title="优惠券" show-arrow :right-text="`-¥${preOrderInfo.couponDeduction}.00`" />
          <uni-list-item title="实付款" :right-text="`¥${preOrderInfo.actualPayment}.00`" />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{ preOrderInfo.actualPayment }}.00</text>
        </view>
        <view class="buttons">
          <button @click="onPaymentButtonClick" class="uni-button">立即支付</button>
        </view>
      </view>
    </view>
  </scroll-page>
  <custom-payment @close="onPaymentClose" @confirm="onPaymentConfirm" :amount="preOrderInfo.actualPayment" :order-id="orderId" ref="paymentRef" />
</template>

<style lang="scss">
@import './index.scss';
</style>
